<template>
  <div>
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人中心</span>
            </div>
            <el-row>
              <el-col :span="5">
                <el-image
                  :src="account.avatar"
                  fit="contain">
                </el-image>
              </el-col>
              <el-col :span="19">
                <div class="name-role">
                  <span class="sender">{{form.username}} - {{dataForm.nickName}}</span>
                </div>
                <div class="registe-info">
               <span class="registe-info">
                  注册时间：{{form.createTime}}
               </span>
                </div>
              </el-col>
            </el-row>

            <el-divider></el-divider>
            <div class="personal-relation">
              <div class="relation-item">邮箱:  <div style="float: right; padding-right:20px;">{{form.email}}</div></div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">所属企业:  <div style="float: right; padding-right:20px;">东软睿道</div></div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" ref="form" :model="form" size="small" label-position="right" :rules="rules">
                <el-form-item label="用户昵称" prop="username">
                  <el-input  v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submit">提交</el-button>
                <el-button size="mini" type="warning" >关闭</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {asyncGet, get, post} from '@/plugins/axios'
import {Message} from "element-ui";

export default {
  name: 'detail',
  created() {
    this.getUserData()
  },
  data(){
    const module = '/user'
    const check = async (rule, value, callback) => {
      const response = await asyncGet(module + '/check', {id: this.form.id, value: value})
      if (response.data.data) {
        callback()
      } else {
        callback(new Error('已存在相同数据'))
      }
    }
    return{
      uri: {
        getOne: module + '/selectOne/',
        saveOrUpdate: module + '/saveOrUpdate'
      },
      dataForm: {
        nickName: '超级管理员',
        phone: '173567777777'
      },
      form: {},
      account: this.$store.getters.GET_ACCOUNT,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {max: 30, message: '用户名不能超过30个字符', trigger: 'blur'},
          {validator: check, trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号格式', trigger: 'blur'},
          {validator: check, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
          {validator: check, trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm('是否修改该用户信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            post(this.uri.saveOrUpdate, this.form, response => {
              if (response.code === 200) {
                Message.success(response.message)
              }
            })
          }).catch((error) => {
            this.$message({
              type: 'info',
              message: error === 'cancel' ? '修改已取消' : error
            });
          })
        } else {
          return false
        }
      });
    },
    getUserData() {
      get(this.uri.getOne + this.account.id, {}, response => {
        if (response.code === 200) {
          this.form = response.data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
//卡片样式
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
//文本样式区
.name-role {
  font-size: 16px;
  padding: 5px;
  text-align:center;
}
.sender{
  text-align:center;
}
.registe-info{
  text-align: center;
  padding-top:10px;
}
.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}

.relation-item {
  padding: 12px;

}
.dialog-footer{
  padding-top:10px ;
  padding-left: 10%;
}
//布局样式区
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>